<!DOCTYPE html>
<link rel="stylesheet" th:href="@{/assets/css/colorbox.css}"/>
<link rel="stylesheet" th:href="@{/assets/css/chosen.css}" />
<head th:include="fragments/head::header"/>
<body class="no-skin">
<div th:include="fragments/navbar::navbar"></div>
<div class="main-container ace-save-state" id="main-container">
    <div th:include="fragments/left::left" id="sidebar" class="sidebar  responsive ace-save-state"></div>
    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li><i class="icon-home home-icon"></i> <a href="/main">首页</a></li>
                    <li class="active">添加卡牌</li>
                </ul>
            </div>
            <div class="page-content">
                <div class="row">
                    <div class="row">
                        <form method="post" id="edit">
                            <div class="tab-pane fade in active">
                                <input type="hidden" name="id" th:value="${card != null}?${card.id}"/>
                                <input type="hidden" id ="input_imgPath" name="imgPath" th:value="${card != null}?${card.imgPath}"/>
                                <div class="container">
                                    <div class="form-horizontal">
                                        <div class="form-group" style="height:29px;" id="div_studentNation">
                                            <label class="col-sm-3 control-label no-padding-right no-padding-left blue">卡牌名称：</label>
                                            <input class="col-sm-2" name="paramName" th:value="${card != null}?${card.paramName}"/>
                                            <label class="col-sm-3 control-label no-padding-right blue">卡牌类型：</label>
                                            <select type="" class="col-sm-3 form-control input-sm" name="type" style="width:190px;height:25px;">
                                                <option th:each="item: ${cardTypeList}" th:selected="${card != null}?${item.id == card.type}" th:attr="nationId=${item.id}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                        </div>
                                        <div class="form-group" style="height:29px">
                                            <label class="col-sm-3 control-label no-padding-right blue">职业：</label>
                                            <select type="" class="col-sm-3 form-control input-sm" name="occupation" style="width:190px;height:25px;">
                                                <option th:each="item: ${cardOccupationList}" th:selected="${card != null}?${item.id == card.Occupation}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                            <label class="col-sm-3 control-label no-padding-right blue">稀有度：</label>
                                            <select type="" class="col-sm-3 form-control input-sm" name="rarity" style="width:190px;height:25px;">
                                                <option th:each="item: ${cardRarityList}" th:selected="${card != null}?${item.id == card.rarity}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                        </div>
                                        <div class="form-group" style="height:29px">
                                            <label class="col-sm-3 control-label no-padding-right blue">费用：</label>
                                            <input class="col-sm-2" name="cost" th:value="${card != null}?${card.cost}"/>
                                            <label class="col-sm-3 control-label no-padding-right blue">生命值：</label>
                                            <input class="col-sm-2" name="health" th:value="${card != null}?${card.health}"/>
                                        </div>
                                        <div class="form-group" style="height:29px">
                                            <label class="col-sm-3 control-label no-padding-right blue">攻击力：</label>
                                            <input class="col-sm-2" name="atk" th:value="${card != null}?${card.atk}"/>
                                        </div>

                                        <div class="form-group" style="height:29px">
                                            <label class="col-sm-3 control-label no-padding-right blue">卡牌种类：</label>
                                            <select type="" class="col-sm-3 form-control input-sm" name="kind" style="width:190px;height:25px;">
                                                <option th:each="item: ${cardKindList}" th:selected="${card != null}?${item.id == card.kind}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                            <label class="col-sm-3 control-label no-padding-right blue">所属集合：</label>
                                            <select type="" class="col-sm-3 form-control input-sm" name="paramSet" style="width:190px;height:25px;">
                                                <option th:each="item: ${cardSetList}" th:selected="${card != null}?${item.id == card.paramSet}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                        </div>
                                        <div class="form-group" style="height:29px">
                                            <label class="col-sm-3 control-label no-padding-right blue">分解获得的尘：</label>
                                            <input class="col-sm-2" name="dustDecompose" th:value="${card != null}?${card.dustDecompose}"/>
                                            <label class="col-sm-3 control-label no-padding-right blue">金色分解获得的尘：</label>
                                            <input class="col-sm-2" name="dustDecomposeGolden" th:value="${card != null}?${card.dustDecomposeGolden}"/>
                                        </div>
                                        <div class="form-group" style="height:29px">
                                            <label class="col-sm-3 control-label no-padding-right blue">合成需要的尘：</label>
                                            <input class="col-sm-2" name="dustSynthesis" th:value="${card != null}?${card.dustSynthesis}"/>
                                            <label class="col-sm-3 control-label no-padding-right blue">金色合成需要的尘：</label>
                                            <input class="col-sm-2" name="dustSynthesisGolden" th:value="${card != null}?${card.dustSynthesisGolden}"/>
                                        </div>

                                        <div class="form-group" style="height:59px">
                                            <label class="col-sm-3 control-label no-padding-right blue">属性：</label>
                                            <div class="col-xs-12 col-sm-7">
                                                <div class="checkbox" th:each="item:${cardProperty}" style="display: inline;margin-top: 5px;">
                                                    <label>
                                                        <input th:name="'cardProperty.' + ${item.name}" th:checked="${item.checked}" type="checkbox" class="ace">
                                                        <span th:text="${item.text}" class="lbl"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <span id = "span_content"  th:text="${card != null}? ${card.description}" style="display: none;"></span>
                                            <label class="col-sm-3 control-label no-padding-right no-padding-left blue"> 描述：</label>
                                            <div class="col-sm-9 table-responsive" style="padding-left:0px;">
                                                <script id="content" name="description" type="text/plain"></script>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <form method="post" action="/upload" id="form_file" enctype="multipart/form-data" style="margin-top: 29px;">
                            <div class="tab-pane fade in active">
                                <div class="container">
                                    <div class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label no-padding-right blue">上传图片：</label>
                                            <div class="col-sm-6" style="padding-left: 0px;" id="div_attachment">
                                                <div class="widget-header">
                                                    <h4>图片上传</h4>
                                                </div>
                                                <div class="widget-body" style="border: 1px solid #ccc!important">
                                                    <div class="widget-main">
                                                        <span id = "offer_attachment">
                                                            <span id = "offerAttachment_show" th:text="${card != null}? ${card.imgPath}"></span>
                                                            <span class="btn btn-sm btn-primary" style="left:9%" id = "offer_show">预览</span>
                                                        </span>
                                                        <input name="fileInput" multiple="" type="file" id="id-input-file-3"/>
                                                        <label>
                                                            <input type="checkbox" name="file-format" id="id-file-format" class="ace"/>
                                                        </label>
                                                        <span style="color: #FF2F2F">*上传图片的格式为&nbsp;:&nbsp;&nbsp; .jpg，&nbsp;.png，&nbsp;.gif,&nbsp;.doc，&nbsp;.docx，&nbsp;.pdf</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="returnPage" class="btn btn-primary" data-dismiss="modal">返回</button>
                                <button type="button" class="btn btn-primary" id="submits">保存</button>
                            </div>
                            <div id="alert" class="alert alert-success" style="display: none;" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <span id="alertText"></span>
                            </div>
                        </form>
                    </div>
                </div>
                <div th:include="fragments/bottom::bottom"></div>
            </div>
        </div>
    </div>
</div>
</div>

<script th:src="@{/assets/js/jquery.validate.min.js}"></script>
<script th:src="@{/assets/js/jquery.validate.zh-CN.js}"></script>
<script th:src="@{/assets/js/jquery.dataTables.min.js}" type="text/javascript"></script>
<script th:src="@{/assets/js/jquery.dataTables.bootstrap.js}" type="text/javascript"></script>
<script th:src="@{/assets/js/dataTables.buttons.min.js}"></script>
<!--<script th:src="@{/assets/js/dataTables.select.min.js}"></script>-->
<script th:src="@{/assets/js/temp.js}" charset="UTF-8"></script>
<script th:src="@{/assets/js/jquery-ui.custom.min.js}" charset="UTF-8"></script>
<script th:src="@{/assets/js/spinbox.min.js}" charset="UTF-8"></script>
<script th:src="@{/assets/js/ace.min.js}"></script>

<script th:src="@{/assets/js/jquery.form.js}"></script>
<script th:src="@{/js/upload/upload.js}"></script>

<!--ueditor-->
<script type="text/javascript" charset="utf-8" th:src="@{/UEditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/UEditor/ueditor.all.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/UEditor/lang/zh-cn/zh-cn.js}"></script>

<!--图片查看器-->
<script th:src="@{/assets/js/jquery.colorbox-min.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script  th:src="@{/assets/js/chosen.jquery.min.js}"></script>
<script type="text/javascript">
    jQuery(function ($) {
        var pageHelper = (function () {
            this.oTable1;
            return {
                init: function () {
                    this.getQueryData();
                    this.handelQueryData();
                    this.render();
                    this.addEvent();
                },
                getQueryData: function () {
                    this.ueEditor;
                    this.uploadComplete = true;
                },
                handelQueryData: function () {

                },
                render: function () {
                    var _self = this;
                    var loadIndex = layer.load(1, {shade: [0.5, '#393D49']});
                    _self.ueEditor = UE.getEditor('content', {
                        toolbars: [
                            [//'anchor', //锚点
                                //'undo', //撤销
                                //'redo', //重做
                                'bold', //加粗
                                'indent', //首行缩进
                                //'snapscreen', //截图
                                'italic', //斜体
                                'underline', //下划线
                                'strikethrough', //删除线
                                'subscript', //下标
                                'fontborder', //字符边框
                                'superscript', //上标
                                'formatmatch', //格式刷
                                'source', //源代码
                                //'blockquote', //引用
                                'pasteplain', //纯文本粘贴模式
                                //'selectall', //全选
                                //'print', //打印
                                'preview', //预览
                                'horizontal', //分隔线
                                //'removeformat', //清除格式
                                'time', //时间
                                'date', //日期
                                //'unlink', //取消链接
                                'insertrow', //前插入行
                                'insertcol', //前插入列
                                //'mergeright', //右合并单元格
                                //'mergedown', //下合并单元格
                                'deleterow', //删除行
                                'deletecol', //删除列
                                //'splittorows', //拆分成行
                                //'splittocols', //拆分成列
                                //'splittocells', //完全拆分单元格
                                //'deletecaption', //删除表格标题
                                //'inserttitle', //插入标题
                                //'mergecells', //合并多个单元格
                                //'deletetable', //删除表格
                                'cleardoc', //清空文档
                                //'insertparagraphbeforetable', //"表格前插入行"
                                //'insertcode', //代码语言
                                'fontfamily', //字体
                                'fontsize', //字号
                                'paragraph', //段落格式
                                'simpleupload', //单图上传
                                //'insertimage', //多图上传
                                //'edittable', //表格属性
                                //'edittd', //单元格属性
                                'link', //超链接
                                'emotion', //表情
                                'spechars', //特殊字符
                                'searchreplace', //查询替换
                                //'map', //Baidu地图
                                //'gmap', //Google地图
                                //'insertvideo', //视频
                                //'help', //帮助
                                'justifyleft', //居左对齐
                                'justifyright', //居右对齐
                                'justifycenter', //居中对齐
                                'justifyjustify', //两端对齐
                                'forecolor', //字体颜色
                                'backcolor', //背景色
                                //'insertorderedlist', //有序列表
                                //'insertunorderedlist', //无序列表
                                //'fullscreen', //全屏
                                //'directionalityltr', //从左向右输入
                                //'directionalityrtl', //从右向左输入
                                'rowspacingtop', //段前距
                                'rowspacingbottom', //段后距
                                //'pagebreak', //分页
                                //'insertframe', //插入Iframe
                                'imagenone', //默认
                                'imageleft', //左浮动
                                'imageright', //右浮动
                                //'attachment', //附件
                                'imagecenter', //居中
                                'wordimage', //图片转存
                                'lineheight', //行间距
                                //'edittip ', //编辑提示
                                //'customstyle', //自定义标题
                                'autotypeset', //自动排版
                                //'webapp', //百度应用
                                'touppercase', //字母大写
                                'tolowercase', //字母小写
                                //'background', //背景
                                //'template', //模板
                                //'scrawl', //涂鸦
                                //'music', //音乐
                                //'inserttable', //插入表格
                                //'drafts', // 从草稿箱加载
                                //'charts' // 图表
                            ]
                        ],
                        'enterTag': 'p',
                        elementPathEnabled: false,//删除元素路径
                        initialFrameHeight: 200,
                        wordCount: false
                    });
                    _self.ueEditor.ready(function() {
                        console.log($("#span_content").text());
                        _self.ueEditor.setContent($("#span_content").text());
                        $(".edui-editor-bottomContainer").remove();
                        layer.close(loadIndex);
                    });

                },
                addEvent: function () {
                    var _self = this;
                    $('#id-input-file-3').ace_file_input({
                        style: 'well',
                        btn_choose: 'Drop files here or click to choose',
                        btn_change: null,
                        no_icon: 'icon-cloud-upload',
                        droppable: true,
                        thumbnail: 'small',//large | fit
                        // .jpg，&nbsp;.png，&nbsp;.gif,&nbsp;.doc，&nbsp;.docx，&nbsp;.pdf
                        allowExt: ['jpg', 'png', 'gif', 'doc', 'docx', 'pdf'],    //该属性只是对文件后缀的控制
                        before_change: function (files, dropped) {
                            return true;
                        },
                        before_remove: function () {
                            $("#input_attachment").val("");
                            return true;
                        },
                        preview_error: function (filename, error_code) {

                        }
                    }).on('change', function () {
                        // 获取文件大小
                        if (!checkUp(this)) {
                            return false;
                        }

                        _self.uploadComplete = false;
                        layer.msg('正在上传中...', {
                            icon: 16,
                            shade: 0.01,
                            time: 5 * 10
                        });
                        $("#form_file").ajaxSubmit(function (message) {
                            _self.uploadComplete = true;
                            if (message) {
                                var fileName = message.fileName;
                                var originalFilename = message.originalFilename;
                                console.log("fileName:" + fileName);
                                console.log("originalFilename:" + originalFilename);
                                $("#input_imgPath").val(fileName);
                                var code = message.code;
                                if (code == "1") {
                                    layer.msg("请上传正确的文件格式!")
                                } else if (message.success) {
                                    $("#input_attachment").val(fileName);
                                    layer.msg("上传成功!");
                                }
                            } else {
                                $('#alertText').text('上传失败');
                                $('#alert').attr('class', 'alert alert-danger').show();
                                setTimeout("$('#alert').hide()", 2000);
                                $("#myModal").modal("hide");
                            }
                        });
                    });

                    $("#submits").click(function () {
                        if(!_self.uploadComplete){
                            layer.msg('正在上传中,请稍后保存!');
                            return;
                        }
                        $(this).attr("disabled","disabled");
                        if(_self.ueEditor.getContent($("#content").text()) == ""){
                            layer.alert('请添加描述！', {icon: 0});
                            $("#submits").removeAttr("disabled");
                            return;
                        }
                        $.ajax({
                            url: "/card/edit",
                            type: "post",
                            data: $("#edit").serialize(),
                            success: function (data) {
                                if (data) {
                                   window.location.href = "/card/list";
                                }
                                else {
                                    $("#submits").removeAttr("disabled");
                                    $('#alertText').text('操作失败');
                                    $('#alert').attr('class', 'alert alert-danger').show();
                                    setTimeout("$('#alert').hide()", 2000);
                                    $("#myModal").modal("hide");
                                }
                            }
                        });
                    });
                    $("#offer_show").click(function () {
                        var url = "/" + $("#offerAttachment_show").text();
                        window.open(url, target = "_blank");
                    });
                }
            }
        })();
        pageHelper.init();
    });
</script>
</body>
</html>